<!--服务国家-->
<template>
  <div class="servercount">
    <div class="page-title">
      <h1 class="title">Can Miss Yeah be shipped to my country</h1>
    </div>
    <p class="text">
      MISS YEAH can serve more than 200 countries worldwide, and our logistics
      can also reach more than 200 countries worldwide; If you cannot find your
      country during the registration process, please contact our staff to add
      it to you by email (Customer@missyeah.com), Facebook (Shop MISS YEAH),
      whatsapp（+86 18818696466）, you just need to wait patiently for 10
      minutes; add After completion, our staff will inform you that the addition
      has been completed and you can shop normally at MISS YEAH.
    </p>
    <h2 class="_title">
      The list of countries served by MISS YEAH is as follows:
    </h2>
    <div class="servercount-frame" v-if="!loading">
      <van-index-bar>
        <div v-for="(item, index) in letter" :key="'item' + index">
          <van-index-anchor :index="item" />
          <van-cell
            v-for="itema in countryList[item]"
            :title="itema.name"
            :key="'cell' + itema"
          />
        </div>
      </van-index-bar>
    </div>
    <Loading v-else />
  </div>
</template>
<script>
export default {
  data() {
    return {
      letter: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      loading: true,
    };
  },
  computed: {
    //国家列表
    countryList() {
      let countList = this.$store.state.over.countryList;
      let list = {};
      for (let i = 0; i < this.letter.length; i++) {
        list[this.letter[i]] = [];
        for (let j = 0; j < countList.length; j++) {
          if (countList[j].name.substring(0, 1) == this.letter[i]) {
            list[this.letter[i]].push(countList[j]);
          }
        }
      }
      return list;
    },
  },
  head() {
    return {
      title: `List Of Service Countries; login&register`,
      meta: [
        {
          hid: "description",
          name: "description",
          content: `Our customers come from various countries around the world. The list of countries served by MISS YEAH is as follows:...`,
        },
      ],
      link: [
        {
          rel: "canonical",
          href: "https://www.missyeah.com" + this.$route.fullPath,
        },
      ],
    };
  },
  mounted() {
    this.loading = false;
  },
};
</script>
<style lang="less" scoped>
@import "fqa.less";
</style>